<template>
	<view class="indexBig">
		<view class="headBox">
			<u-icon name="account-fill" size="72" color="#EA7130" style="margin-right: 16rpx;"></u-icon>
			<view class="">
				<view class="">{{myInfo.phone}}</view>
			</view>
		</view>
		<view class="walletBox" @click="goToPage('money')">
			<view class="">
        <uni-icons type="wallet" style="margin-right: 16rpx;"></uni-icons>钱包		
			</view>
			<view class="">¥{{myInfo.walletBalance.toFixed(2)}}</view>
		</view>
		<view class="walletBox orderBox" @click="goToPage('allOrder')">
			<view class="">
        <u-icon name="order" size="48" style="margin-right: 16rpx;"></u-icon>全部订单
			</view>
			<u-icon name="arrow-right" size="36" color="#999"></u-icon>
		</view>
		<view class="walletBox orderBox" @click="editMyAccount()">
			<view class="">
        <uni-icons type="smallcircle" style="margin-right: 16rpx;"></uni-icons> 退出登录
			</view>
		</view>
		<view class="serverBox">
			<view class="imgContent">
				<image src="https://www.yongshantuan.cn/images/yongshan/banner.png" mode=""></image>
			</view>
			<view class="" v-for="(item,index) in list" :key="index">
				<view class="tit">{{item.name}}</view>
				<view class="info">{{item.addressNames}}</view>
			</view>
		</view>
		<!-- 底部菜单 -->
		<CommenFooter :checkIndex="2"></CommenFooter>
	</view>
</template>

<script>
	import {getMyInfo,getListAndAddress} from '@/utils/req/api.js'
	import CommenFooter from '@/components/footer/footer.vue'
	export default {
		components: {
			CommenFooter
		},
		data() {
			return {
				myInfo:{
					walletBalance:0
				},
				list:[],
			}
		},
		mounted(){
			this.getMyInfo()
			this.getListAndAddress()
		},
		methods: {
			async getMyInfo(){
				let res=await getMyInfo();
				this.myInfo=res.data.result;
			},
			async getListAndAddress(){
				let res=await getListAndAddress();
				this.list=res.data.result;
			},
			editMyAccount(){
				uni.clearStorageSync();
				uni.navigateTo({
					url:'/pages/login/login'
				})
			},
			goToPage(type) {
				let url;
				switch (type) {
					case "allOrder":
						url = './order/allOrder';
						break;
					case "money":
						url = './withdrawal/withdrawal';
						break;
				}
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.indexBig {
		min-height: 100vh;
		background: linear-gradient(0.45deg, #F5F5F5 6.52%, #FF8739 58.65%, #FB690F 98.93%);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		padding: 40rpx 20rpx 100rpx 20rpx;

		.headBox {
			background-color: #fff;
			border-radius: 20rpx;
			margin: 60rpx 0;
			padding: 36rpx;
			@include flexs(flex-start, center);

			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				margin-right: 20rpx;
				margin-left: 8rpx;
			}

			>view {
				// @include flexs(space-between, flex-start);
				@include flexs(center,center);
				height: 120rpx;
				flex-direction: column;

				>view:nth-child(1) {
					font-weight: bold;
					font-size: 32rpx;
					line-height: 2;
				}

				>view:nth-child(2) {
					color: rgba(0, 0, 0, 0.55);
					font-size: 28rpx;
				}
			}
		}

		.walletBox {
			background-color: #fff;
			border-radius: 20rpx;
			margin: 40rpx 0;
			padding: 40rpx 20rpx;
			box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
			@include flexs(space-between, center);

			>view {
				@include flexs();

				image {
					width: 50rpx;
					height: 50rpx;
					margin-right: 20rpx;
				}

				&:nth-child(2) {
					font-weight: bold;
				}
			}
		}

		.orderBox {
			>image {
				width: 30rpx;
				height: 30rpx;
			}
		}

		.serverBox {
			margin: 40rpx 0;
			padding: 40rpx 20rpx;
			background-color: #fff;
			border-radius: 20rpx;
			box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);

			.imgContent {
				width: 100%;
				padding-bottom: 31%;
				position: relative;
				margin-bottom: 20rpx;

				image {
					position: absolute;
					left: 0;
					top: 0;
					bottom: 0;
					right: 0;
					width: 100%;
					height: 100%;
				}
			}

			>view {
				margin-bottom: 20rpx;

				.tit {
					font-size: 32rpx;
					line-height: 2;
				}

				.info {
					font-size: 28rpx;
					color: rgba(0, 0, 0, 0.55);
				}
			}
		}

		.commenMenu {
			position: fixed;
			// left: 0;
			bottom: 0;
			width: 100%;
			height: 100rpx;
			background-color: #fff;
			border-top: 1px solid #eee;
      margin-left: -20rpx;
			@include flexs(space-around, center);

			>view {
				@include flexs(center, center);
				flex-direction: column;

				font-size: 26rpx;
				line-height: 1;
				padding: 5rpx 0 15rpx 0;
				color: #ccc;

				image {
					width: 60rpx;
					height: 60rpx;

					&:nth-child(1) {
						display: block;
					}

					&:nth-child(2) {
						display: none;
					}
				}
			}

			>.check {
				color: #F1B825;
				font-weight: bold;

				image {
					&:nth-child(1) {
						display: none;
					}

					&:nth-child(2) {
						display: block;
					}
				}
			}
		}


	}
</style>
